<template>
  <div class="app-container">
    <div>
      <el-cascader
        v-model="viewModel.SubjectId"
        size="small"
        separator="-"
        style="width: 300px;"
        @change="handleChange"
        placeholder="课程分类名称"
        filterable
        clearable
        :options="subjectList"
        :props="{ expandTrigger: 'hover', checkStrictly: true , emitPath: false}"
      />
      <!-- <el-select v-model="viewModel.TeachTypeCode" size="small" @change="queryList" placeholder="请选择">
        <el-option v-for="item in TeachTypeList" :key="item.TypeCode" :label="item.label" :value="item.TypeCode">
        </el-option>
      </el-select>-->
      <el-input
        v-model="viewModel.Title"
        size="small"
        placeholder="课程系列名称"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="searchList"
      />
      <el-dropdown
        @command="handleCommand"
        size="small"
        style="margin-left: 30px;margin-right:20px;"
      >
        <el-button size="small" type="info" plain class="el-dropdown-link">
          {{checkLabel}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="data in categoryList"
            :key="data.value"
            :command="data"
          >{{ data.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-button type="primary" size="small" @click="searchList" icon="el-icon-search">查询</el-button>
      <el-button type="primary" size="small" @click="refresh" icon="el-icon-refresh">刷新</el-button>
        <el-button type="primary" size="small" @click="create" icon="el-icon-plus">新增</el-button>
    </div>
    <el-row :gutter="30" v-loading="loading">
      <el-col :span="6" v-for="m in modelList" :key="m.ID" style="margin-top: 20px;">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="m.CoverUrl" class="image-c" />
          <div style="padding: 14px;">
            <span
              style="text-overflow:ellipsis !important;white-space:nowrap !important;overflow:hidden !important;width: 100% !important;"
              :title="m.Title"
            >{{ m.Title }}</span>
            <div class="bottom clearfix">
              <span class="time">创建时间：{{ m.CreateTime}}</span>
              <div style="text-align: right;">
                <el-button type="text" size="mini" icon="el-icon-check" @click="edit(m.ID)">编辑</el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分页组件：https://element.eleme.cn/#/zh-CN/component/pagination -->
    <div class="block" style="float:right;margin-top:25px;" v-if="viewModel.total>0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="viewModel.page"
        :page-sizes="[8, 16, 60, 120,240]"
        :page-size="viewModel.pageSize"
        @prev-click="lastPage"
        @next-click="nextPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="viewModel.total"
      ></el-pagination>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.image-c {
  width: 100%;
  height: 240px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>

<script>
import {
  getCourseSeriesList,
  deleteModel,
  publishModel,
  setState
} from "@/api/courseseries";
import { GetDictionaryByPCode } from '@/api/dictionary'

export default {
  data() {
    return {
      viewModel: {
        page: 1,
        pageSize: 8,
        total: 0,
        Title: "",
        SubjectId: '',
        TeachType: '',
        State: '2',
        OrderBy: "ID", //排序字段
        SortDir: "" //升序
      },
      checkLabel: '全部',
      modelList: [],
      subjectList: [],
      categoryList: [],
      TeachTypeList: [],
      stateList: [
        {
          id: -1,
          label: '全部'
        },
        {
          id: 1,
          label: '未通过'
        },
        {
          id: 2,
          label: '审核中'
        },
        {
          id: 3,
          label: '已通过'
        }
      ],
      loading: true
    };
  },
  computed: {
    // 计算属性，只要相关联的值没有改变，直接返回，不再进行计算，与方法区别，缓存
  },
  created() {
    // 实例创建完成后执行的代码
    this.queryList()
    this.getSubjectList()
    this.getCategoryList()
  },
  methods: {
    async getSubjectList() {
      var res = await GetDictionaryByPCode("Subject")
      if (res && res.data) {
        this.subjectList = res.data
      }

    },
    async getCategoryList() {
      var res = await GetDictionaryByPCode("Category")
      console.log(res)
      if (res && res.data) {
        this.categoryList = res.data
        this.categoryList.unshift({ label: '全部', value: '', TypeCode: '' })
      }
    },
    async GetDictionaryByPCode1(ams) {
      const res = await GetDictionaryByPCode(ams);
      this.TeachTypeList = res.data;
      this.TeachTypeList.unshift({ TypeCode: '', label: '全部' })
    },
    handleCommand(data) {
      this.checkLabel = data.label
      this.viewModel.TeachType = data.TypeCode
      this.queryList()
    },
    async getList(viewModel) {
      this.loading = true;
      const res = await getCourseSeriesList(viewModel);
      if (res.data) {
        this.viewModel.total = res.data.TotalCount;
      }
      this.modelList = res.data.Items;
      this.loading = false;
    },
    handleChange(value) {
      this.viewModel.SubjectId = value
      this.searchList()
    },
    queryList() {
      this.getList(this.viewModel);
    },
    searchList() {
      this.viewModel.page = 1
      this.getList(this.viewModel);
    },
    goAdd() {
      this.$router.push("/ems/create/");
    },
    edit(id) {
      this.$router.push("/ems/create/" + id);
    },
    create() {
      this.$router.push("/ems/create/0");
    },
    refresh() {
      this.viewModel.Title = "";
      this.viewModel.SubjectId = "";
      this.viewModel.page = 1;
      this.checkLabel = "全部"
      this.queryList();
    },
    sortChange(data) {
      const { prop, order } = data;
      this.viewModel.OrderBy = prop;
      if (prop == null || prop == "") this.viewModel.OrderBy = "ID";
      if (order === "ascending") {
        this.viewModel.SortDir = 'asc';
      } else {
        this.viewModel.SortDir = 'desc';
      }
      this.queryList();
    },
    lastPage(val) {
      this.viewModel.page = val;
    },
    nextPage(val) {
      this.viewModel.page = val;
    },
    handleSizeChange(val) {
      this.viewModel.pageSize = val;
      this.queryList();
    },
    handleCurrentChange(val) {
      this.viewModel.page = val;
      this.queryList();
    },
    handleDelete(m) {
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await deleteModel(m.ID);
          this.$notify({
            title: "成功",
            message: "操作成功",
            type: "success",
            duration: 3000
          });
          this.queryList();
        })
        .catch(err => {
          console.error(err);
        });
    },
    handlePublish(m, status) {
      var p = "上架"
      if (status == 2)
        p = "下架"
      this.$confirm("确认" + p + "?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await publishModel(m.ID, status);
          this.$notify({
            title: "成功",
            message: "操作成功",
            type: "success",
            duration: 3000
          });
          this.queryList();
        })
        .catch(err => {
          console.error(err);
        });
    },
    handleState(id) {
      this.$confirm("确认重新审核?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          var res = await setState(id, 2);
          if (res)
            this.$notify({
              title: "成功",
              message: "操作成功",
              type: "success",
              duration: 3000
            });
          else
            this.$notify({
              title: "失败",
              message: "请重新点击",
              type: "error",
              duration: 3000
            });
          this.queryList();
        })
        .catch(err => {
          console.error(err);
        });
    }
  }
};
</script>